<template>
    <div>
        <!-- 数据图 -->
        <pic></pic>
        <!-- 搜索 -->
        <mySearch @searchfunparent="searchfunparent" @parentopen="parentopen"></mySearch>
        <!-- 表单表格 -->
        <myTable @unpdateDialog="unpdateDialog" :arr="arr" @resetHome="initGethome"></myTable>
        <!-- 弹窗 -->
        <myDialog :btntype="btntype" :id="id" @resetTable="initGethome" @parentclose="parentclose" v-if="show">
        </myDialog>
        <!-- 分页 -->
        <mypage @changePage="changePage" @changepageSize="changepageSize" :page="page" :pageSize="pageSize"
            :total="total" :pageSizes="pageSizes"></mypage>

    </div>
</template>

<script>

import pic from './component/pic.vue'
import myDialog from './component/myDialog.vue'
import mySearch from './component/mySearch.vue'
import myTable from './component/myTable.vue'
import { getHomeApi } from './api/homeApi.js'
import mypage from './component/mypage.vue'
export default {
    components: {
        mySearch, myTable,
        mypage, myDialog, pic
    },
    data() {
        return {
            show: false,//控制弹框组件或隐藏
            //存放柜表格数据
            arr: [],
            id: {},
            keyword: '', // 在这里定义个关键词,空字符串
            page: 1,//当前页码
            pageSize: 10,//每页多少条
            pageSizes: [10, 20, 50, 100, 150, 200],
            total: 0,//默认0 总条数
            btntype: 0,//弹窗切换，0是添加，1是编辑
        }
    },
    mounted() {
        this.initGethome()
    },
    methods: {
        parentopen() {
            // 打开弹框
            this.show = true
            this.id = {}
            this.btntype = 0
            // this.$children[3].dialogVisible = true
            // console.log(this.$children);
        },
        parentclose() {//关闭
            this.show = false
            // console.log(2222222);
        },

        // 搜索
        searchfunparent(val) {//这里的val是关键词
            // 当点击的时候直接赋值
            this.keyword = val
            this.initGethome()
        },
        initGethome() {

            getHomeApi({ keyword: this.keyword, page: this.page, pageSize: this.pageSize }).then(res => {
                if (res.code == 200) {

                    this.arr = res.data
                    // console.log('res', res);
                    this.total = res.total
                }
            })
        },
        changepageSize(val) {
            //自定义事件，切换pageSize触发
            this.pageSize = val
            this.initGethome()
        },
        changePage(val) {
            //自定义事件，切换page触发
            this.page = val
            this.initGethome()
        },
        // 编辑
        unpdateDialog(id) {
            // console.log('id', id);
            // this.parentopen()
            this.id = id
            this.show = true
            this.btntype = 1

        }
    }
}
</script>

<style lang="less" scoped>
</style>